<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">参数</label>
        <el-input
          v-model="query.name"
          clearable
          placeholder="参数"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">冰箱</label>
        <el-select
          v-model="query.cabinetId"
          clearable
          style="width: 185px"
          placeholder="冰箱"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        >
          <el-option
            v-for="item in refrigeratorOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <label class="el-form-item-label">入库时间</label>
        <date-range-picker v-model="query.createdAt" class="date-item" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="600px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="120px"
        >
          <el-form-item label="参数" prop="name">
            <el-select
              v-model="form.name"
              style="width: 370px"
              clearable
              filterable
              allow-create
              reserve-keyword
              :remote-method="getName"
              placeholder="请添加参数"
              @visible-change="nameVisible"
              ref="nameSel"
            >
              <el-option
                v-for="item in names"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类别" prop="category">
            <el-select
              v-model="form.category"
              style="width: 370px"
              placeholder="请选择类别"
              filterable
              clearable
              allow-create
              default-first-option
              @blur="onSelectBlur('category', 'categorySel')"
              ref="categorySel"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="编号" prop="number">
            <el-input v-model="form.number" style="width: 370px" />
          </el-form-item>
          <el-form-item label="批号" prop="batchNumber">
            <el-input v-model="form.batchNumber" style="width: 370px" />
          </el-form-item>
          <el-form-item label="成分" prop="ingredientData">
            <el-button size="mini" type="primary" @click="addIngredient"
              >添加成分</el-button
            >
            <el-table
              v-if="form.ingredientData.length != 0"
              :data="form.ingredientData"
              style="width: 100%"
            >
              <el-table-column prop="ingredientName" label="成分名称">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ingredientName" />
                </template>
              </el-table-column>
              <el-table-column prop="value" label="标准值" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" />
                </template>
              </el-table-column>
              <el-table-column
                prop="uncertainty"
                label="不确定度"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    <span>±</span>
                    <el-input
                      v-model="scope.row.uncertainty"
                      style="width: 80%"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="ingredientUnit"
                label="标准值单位"
                align="center"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.ingredientUnit"
                    placeholder="请选择"
                    filterable
                    clearable
                    allow-create
                    default-first-option
                    @blur="
                      onSelectBlurIngredientUnit(
                        scope.row.ingredientUnit,
                        'ingredientUnit'
                      )
                    "
                    ref="ingredientUnit"
                  >
                    <el-option
                      v-for="item in IngredientUnitOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column width="35">
                <template slot-scope="scope">
                  <i
                    class="el-icon-circle-close"
                    @click="delIngredient(scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="基体(V/V)" prop="matrix">
            <el-input v-model="form.matrix" style="width: 370px" />
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="数量" prop="amount">
              <el-input v-model="form.amount" style="width: 170px" />
            </el-form-item>
            <el-form-item class="unit" prop="unit">
              <el-select
                v-model="form.unit"
                placeholder="请选择"
                filterable
                clearable
                style="width: 170px"
              >
                <el-option label="支" :value="1" />
                <el-option label="瓶" :value="2" />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item v-if="form.unit == 2" label="规格" prop="capacity">
            <el-input
              type="number"
              v-model="form.capacity"
              style="width: 350px"
            />ml
          </el-form-item>
          <el-form-item label="有效期" prop="expirationDate">
            <el-date-picker
              style="width: 370px"
              v-model="form.expirationDate"
              type="date"
              placeholder="选择有效期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="冰箱" prop="cabinetId">
            <el-select
              v-model="form.cabinetId"
              style="width: 370px"
              clearable
              filterable
              :remote-method="getCabinets"
              :loading="searchLoading"
              placeholder="请选择冰箱"
            >
              <el-option
                v-for="item in refrigeratorOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="是否申领" prop="isApply">
            <el-radio-group v-model="form.isApply" @input="changeIsApply">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item
            label="是否审批"
            prop="isAudit"
          >
            <el-radio-group v-model="form.isAudit">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="证书">
            <el-upload
              ref="upload"
              accept=".pdf,image/jpg,image/jpeg,image/png"
              :action="baseUrl + '/api/localStorage'"
              :before-upload="handleBeforeUpload"
              :headers="authHeader"
              class="upload-demo"
              :limit="1"
              :on-change="handleChange"
              :on-exceed="handleExceed"
            >
              <el-button type="primary">证书上传</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传一个图片或pdf格式的文件
                </div>
              </template>
            </el-upload>
            <el-button type="primary">
              <a class="file-upload-link" :href="form.fileUrl" target="_blank"
                >预览</a
              >
            </el-button>
          </el-form-item>
          <el-form-item label="稀释方法">
            <el-input
              v-model="form.attenuation"
              :autosize="{ minRows: 3 }"
              type="textarea"
              style="width: 370px"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.note"
              :rows="3"
              type="textarea"
              style="width: 370px"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="参数" align="center" />
        <el-table-column label="条码" prop="barCode" align="center">
          <template slot-scope="scope">
            <div class="barCode">
              <el-image
              :src="
                baseUrl +
                '/api/barCode/showBarCode?id=' +
                scope.row.id +
                '&type=' +
                scope.row.type
              "
              style="height: 40px; vertical-align: middle"
              :preview-src-list="srcList"
              @click="enlargeBarcode(scope.row)"
            />
            <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="二维码" prop="QRCode" align="center">
          <template slot-scope="scope">
            <el-image
              :src="
                baseUrl +
                '/api/barCode/showQRCode?id=' +
                scope.row.id +
                '&type=' +
                scope.row.type
              "
              style="height: 40px; vertical-align: middle"
              :preview-src-list="srcList"
              @click="enlargeQRCode(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="category" label="类别" align="center" />
        <el-table-column prop="amount" label="数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.amount }}</span>
            <span v-if="scope.row.unit == 1">(支)</span>
            <span v-if="scope.row.unit == 2">(瓶)</span>
          </template>
        </el-table-column>
        <el-table-column prop="residue" label="剩余量" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.unit == 1"> - - </span>
            <span v-if="scope.row.unit == 2">{{ scope.row.residue }} mL</span>
          </template>
        </el-table-column>
        <el-table-column prop="cabinetName" label="冰箱" align="center"/>
        <el-table-column prop="createdAt" label="入库时间" align="center" width="135"/>
        <el-table-column prop="expirationDate" label="有效期" align="center" width="135"/>
        <!-- <el-table-column prop="note" label="备注" align="center" /> -->
        <el-table-column label="条形码" align="center">
          <template slot-scope="scope">
            <button
              class="el-button el-button--primary el-button--mini"
              @click="barView(scope.row)"
            >
              <i class="el-icon-printer" size="100" />
            </button>
          </template>
        </el-table-column>
        <el-table-column label="二维码" align="center">
          <template slot-scope="scope">
            <button
              class="el-button el-button--primary el-button--mini"
              @click="qrView(scope.row)"
            >
              <i class="el-icon-printer" size="100" />
            </button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="
            checkPer([
              'admin',
              'hazardousChemicals:edit',
              'hazardousChemicals:del',
            ])
          "
          label="操作"
          width="220px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              class="isForbiddenBtn"
              @click="showAddNumDialog(scope.row)"
              >入库</el-button
            >
            <el-button
              type="success"
              class="isForbiddenBtn"
              @click="crud.toQuote(scope.row)"
              >引用</el-button
            >
            <el-button
              type="success"
              class="isUploadBtn"
              @click="onFile(scope.row)"
              >{{ scope.row.fileUrl ? "查看证书" : "上传证书" }}</el-button
            >
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination ref="pag" />
      <UploadFile
        v-if="isShowUploadFile"
        :isShowUploadFile="isShowUploadFile"
        @getFileUrl="getFileUrl"
        @close="isShowUploadFile = false"
      />
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="view"
      title="打印预览"
      width="350px"
    >
      <el-image
        :src="
          baseUrl +
          '/api/barCode/showBarCode?id=' +
          codeId +
          '&type=' +
          codeType
        "
      />
      <el-button
        type="primary"
        @click="fileDownload()"
        style="margin-left: 40%"
      >
        打印
      </el-button>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="views"
      title="打印预览"
      width="350px"
    >
      <el-image
        :src="
          baseUrl + '/api/barCode/showQRCode?id=' + codeId + '&type=' + codeType
        "
      />
      <el-button
        type="primary"
        @click="fileDownloadQR()"
        style="margin-left: 40%"
      >
        打印
      </el-button>
    </el-dialog>
    <AddNumDialog @refresh="crud.pageChangeHandler(0)" v-if="isShowAddNumDialog" @close="isShowAddNumDialog = false"  :isShowAddNumDialog="isShowAddNumDialog" :info="currentAddNumDialogInfo"/>
  </div>
</template>

<script>
import AddNumDialog from "./components/addNumDialogStandar.vue";
import crudHazardousChemicals, { edit } from "@/api/hazardousChemicals";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operationDelete";
import pagination from "@crud/Pagination";
import { get } from "@/api/lab";
import { getCabinet } from "@/api/cabinet";
import DateRangePicker from "@/components/DateRangePicker";
import { printCode } from "@/api/barCode";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import UploadFile from "./components/uploadFile.vue";
import { getRefrigeratorListAPI } from "@/api/refrigerator";
import {searchName} from "@/api/hazardousChemicals";

const defaultForm = {
  id: null,
  name: null,
  type: 2,
  amount: null,
  capacity: null,
  labId: null,
  note: null,
  createdAt: null,
  isDeleted: null,
  countType: 1,
  updatedAt: null,
  barCode: null,
  cabinetId: null,
  measureId: 1,
  dangerClasses: null,
  ingredientData: [],
  fileUrl: null,
  attenuation: null,
  category: null,
  number: null,
  batchNumber: null,
  matrix: null,
  expirationDate: null,
  unit: null,
  isApply: 1,
  isAudit: 1,
};
export default {
  name: "StandardSubstance",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    DateRangePicker,
    UploadFile,
    AddNumDialog
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: "标准物质",
      url: "api/hazardousChemicals",
      idField: "id",
      sort: "id,desc",
      crudMethod: { ...crudHazardousChemicals },
      query: {
        type: 2,
      },
      optShow: {
        add: true,
        edit: false,
        del: true,
        download: true,
        reset: true,
        printStandardSubstance: true,
        printQRStandardSubstance: true,
        standardBatchImport:true,
        standardUpload:true
      },
    });
  },
  data() {
    const limtCapacity = (rule, value, callback) => {
      if (this.form.unit == 2 && !value) {
        return callback(new Error("请输入规格"));
      }
      callback();
    };
    const limtIngredientData = (rule, value, callback) => {
      if (value.length == 0) {
        return callback(new Error("成分不能为空"));
      }
      const isPass = value.every((item) => {
        let count = 0;
        for (let k in item) {
          if (!item[k]) {
            count++;
          }
        }
        if (count == 0) return true;
        else return false;
      });
      if (!isPass) {
        return callback(new Error("成分信息请填写完整"));
      }
      callback();
    };
     let limtName =  (rule, value, callback) => {
      if (!value) {
        return callback(new Error("名称不能为空"));
      }
      //else if (this.names.some(item=>item.name==this.form.name)) {
      //  return callback(new Error("该名称物质已入库，请勿重复入库"));
      //}
      callback();
    };
    return {
      currentAddNumDialogInfo:{},
      isShowAddNumDialog:false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      permission: {
        add: ["admin", "hazardousChemicals:add"],
        edit: ["admin", "hazardousChemicals:edit"],
        del: ["admin", "hazardousChemicals:del"],
      },
      rules: {
        name: [{required: true,trigger: "change",validator: limtName }],
        expirationDate: [
          { required: true, message: "有效期不能为空", trigger: "change" },
        ],
        unit: [{ required: true, message: "单位不能为空", trigger: "change" }],
        matrix: [{ required: true, message: "基体不能为空", trigger: "blur" }],
        amount: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        number: [{ required: true, message: "编号不能为空", trigger: "blur" }],
        batchNumber: [
          { required: true, message: "批号不能为空", trigger: "blur" },
        ],
        ingredientData: [
          { required: true, validator: limtIngredientData, trigger: "blur" },
          { validator: limtIngredientData, trigger: "change" },
        ],
        capacity: [
          { required: true, trigger: "blur", validator: limtCapacity },
        ],
        labId: [
          { required: true, message: "实验室不能为空", trigger: "change" },
        ],
        category: [
          { required: true, message: "类型不能为空", trigger: "change" },
        ],
        cabinetId: [
          { required: true, message: "冰箱不能为空", trigger: "change" },
        ],
        dangerClasses: [
          { required: true, message: "危险等级不能为空", trigger: "blur" },
        ],
        // isApply: [
        //   { required: true, message: "请选择是否需要申领", trigger: "blur" },
        // ],
        isAudit: [
          { required: true, message: "请选择是否需要申领", trigger: "blur" },
        ],
      },
      queryTypeOptions: [
        { key: "name", display_name: "名称" },
        { key: "labName", display_name: "实验室" },
        { key: "countType", display_name: "计数类型" },
        { key: "cabinetName", display_name: "冰箱" },
        { key: "dangerClasses", display_name: "危险等级" },
      ],
      srcList: [], //预览图片列表
      searchLoading: false,
      labs: [],
      cabinets: [],
      names: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      searchForm: {
        page: 1,
        size: 1000,
        name: "",
        id: "",
      },
      categoryOptions: [
        {
          label: "标准物质",
          value: 1,
        },
        {
          label: "标准溶液",
          value: 2,
        },
      ],
      IngredientUnitOptions: [
        {
          label: "mg/L",
          value: 1,
        },
        {
          label: "μg/L",
          value: 2,
        },
        {
          label: "μg/mL",
          value: 3,
        },
      ],
      refrigeratorOptions: [],
      isShowUploadFile: false,
      currentFlie: {},
      openDoorId: "",
      view: false,
      views: false,
      codeId: "",
      codeType: "",
    };
  },
  computed: {
    ...mapGetters(["fileUploadApi"]),
    authHeader() {
      return { Authorization: getToken() };
    },
  },
  created() {
    this.getLabs();
    this.getCabinets();
    this.getName();
    this.getRefrigerator()
    // this.showBarCode()
  },

  computed: {
    ...mapGetters(["fileUploadApi", "baseApi"]),
    authHeader() {
      return { Authorization: getToken() };
    },
  },
  methods: {
    showAddNumDialog(row){
      this.currentAddNumDialogInfo = row
      this.isShowAddNumDialog= true
    },
    // nameblur(){
    //   this.form.name = this.$refs.nameSel.selectedLabel
    // },
    nameVisible(e){
      if(e){
        this.$refs.nameSel.$data.selectedLabel = this.form.name
      }
    },
    async getRefrigerator(){
      const res  = await getRefrigeratorListAPI()
      this.refrigeratorOptions = res
    },
    changeIsApply(val) {
      if (val == 0) {
        this.form.isAudit = 0;
      }
    },
    onFile(row) {
      this.currentFlie = row;
      if (row.fileUrl) {
        window.open(row.fileUrl);
      } else {
        console.log("show upload file");
        this.isShowUploadFile = true;
      }
    },
    async getFileUrl(url) {
      this.currentFlie.fileUrl = url;
      await crudHazardousChemicals.edit({
        id: this.currentFlie.id,
        fileUrl: url,
      });
      this.crud.refresh();
    },
    // 文件上传前触发
    handleBeforeUpload(file) {
      // 拿到文件后缀名
      const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      // 当然拉我的需求是只需要图片和pdf，大家有需要可以在此处扩展
      const isJpg = fileType === "jpg";
      const isPng = fileType === "png";
      const isJpeg = fileType === "jpeg";
      const isPdf = fileType === "pdf";
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // 根据后缀名判断文件类型
      if (!isJpg && !isPng && !isJpeg && !isPdf) {
        this.$message.error(
          "只能上传图片和pdf格式的文件！",
          "error",
          "vab-hey-message-error"
        );
        return false;
      }
      // 可以限制图片的大小
      // if (!isLt1M) {
      //     this.$message.error('上传图片大小不能超过 1MB!');
      // }
      return isJpg || isPng || isJpeg || isPdf;
    },

    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(uploadFile, uploadFiles) {
      // 文件上传成功之后保存后端返回的路径
      if (uploadFile.response) {
        uploadFile.response.path = uploadFile.response.path.slice(4);
        this.form.fileUrl =
          process.env.VUE_APP_BASE_API + uploadFile.response.path;
      }
    },
    // 文件超出上传限制 此方法是和:limit绑定的                              范围时就会触发这个函数
    handleExceed(files, uploadFiles) {
      this.$message.error(
        "只能上传一个文件，如有需要请删除上一个文件再进行上传"
      );
    },
    delIngredient(row) {
      this.form.ingredientData = this.form.ingredientData.filter(
        (item) => item.id != row.id
      );
    },
    addIngredient() {
      this.form.ingredientData.push({
        id: this.form.ingredientData.length + 1,
        ingredientName: "",
        value: "",
        ingredientUnit: "",
        uncertainty: "",
      });
    },
    onSelectBlur(form, sel) {
      this.form[form] = this.$refs[sel].selectedLabel;
    },
    onSelectBlurIngredientUnit(val, sel) {
      val = this.$refs[sel].selectedLabel;
    },
    getLabs(query = "") {
      this.searchForm.name = query;
      this.searchLoading = true;
      get()
        .then((response) => {
          this.searchLoading = false;
          this.labs = response;
        })
        .catch((_) => {
          this.searchLoading = false;
        });
    },
    getCabinets(query = "") {
      this.searchForm.name = query;
      this.searchLoading = true;
      getCabinet(this.searchForm)
        .then((response) => {
          this.searchLoading = false;
          this.cabinets = response.content;
        })
        .catch((_) => {
          this.searchLoading = false;
        });
    },
    getName() {
      searchName(2)
        .then((response) => {
          this.names = response;
        })
        .catch((_) => {
          console.log(response);
        });
    },
    onChanged(value) {
      this.searchForm.name = "";
      this.searchLoading = true;
      getCabinet(this.searchForm)
        .then((response) => {
          this.searchLoading = false;
          this.cabinets = response.content;
          this.cabinets = this.cabinets.filter((item) => {
            return item.labId == value;
          });
          if (this.cabinets.length != 0) {
            this.form.cabinetId = this.cabinets[0].id;
          } else {
            this.form.cabinetId = null;
          }
        })
        .catch((_) => {
          this.searchLoading = false;
        });
    },
    barView(row) {
      this.view = true;
      this.codeId = row.id;
      this.codeType = row.type;
    },
    qrView(row) {
      this.views = true;
      this.codeId = row.id;
      this.codeType = row.type;
    },
    fileDownload() {
      printCode({
        itemId: this.codeId,
        itemType: 2,
        codeType: 1,
      }).then((res) => {
        this.$message.success("已添加到打印队列");
      });
    },
    fileDownloadQR() {
      printCode({
        itemId: this.codeId,
        itemType: 2,
        codeType: 2,
      }).then((res) => {
        this.$message.success("已添加到打印队列");
      });
    },
    enlargeBarcode(row) {
      var arr =
        this.baseUrl +
        "/api/barCode/showBarCode?id=" +
        row.id +
        "&type=" +
        row.type;
      this.srcList = arr.split(";");
    },
    enlargeQRCode(row) {
      var arr =
        this.baseUrl +
        "/api/barCode/showQRCode?id=" +
        row.id +
        "&type=" +
        row.type;
      this.srcList = arr.split(";");
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      // this.$store.dispatch("hjuser/getStoreHouse");
      return true;
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.crud.data.map(
        (item) =>
          (item = {
            ...item,
            unit: Number(item.unit),
            ingredientData: JSON.parse(item.ingredientData),
          })
      );
      return true;
    },
    [CRUD.HOOK.afterDelete]() {
      // this.$store.dispatch("hjuser/getStoreHouse");
    },
    [CRUD.HOOK.afterDelete]() {
      // this.$store.dispatch("hjuser/getStoreHouse");
    },
    [CRUD.HOOK.beforeSubmit](val) {
      this.openDoorId = val.form.cabinetId;
    },
    async [CRUD.HOOK.afterSubmit](val) {
      this.$refs.upload.clearFiles();
      this.isApply = 1;
      this.isAudit = 0;
      this.getName()
      // try {
      //   const res = await openDoor({id: this.openDoorId})
      //   this.crud.notify(res, CRUD.NOTIFICATION_TYPE.SUCCESS)
      //    setTimeout(async ()=>{
      //       await closeDoor({id: this.openDoorId})
      //    },20000)
      // } catch (error) {
      //   this.crud.notify('开门失败', CRUD.NOTIFICATION_TYPE.ERROR)
      // }
    },
  },
};
</script>

<style scoped lang="scss">
.el-form::v-deep {
  div.unit {
    .el-form-item__content {
      margin-left: 30px !important;
    }
  }
}

.file-upload {
  display: flex;
  justify-content: space-between;
  .file-upload-link {
    color: white;
  }
  .file-upload-link:visited {
    color: white;
  }
}
.el-upload__tip {
  color: red;
}
.el-table ::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: center;

  .isForbiddenBtn {
    width: 43px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 5px;
    padding: 0;
  }
  .isUploadBtn {
    width: 60px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 5px;
    padding: 0;
  }
  .barCode{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
